<!DOCTYPE html>

<html>
<head>
  <title>entitiesTabView.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div class="container">
    <div class="page">

      <div class="header">
        
          <h1>entitiesTabView.coffee</h1>
        

        
          <div class="toc">
            <h3>Table of Contents</h3>
            <ol>
              
                
                <li>
                  <a class="source" href="admin.html">
                    admin.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditData.html">
                    api.auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditEvent.html">
                    api.auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.html">
                    api.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.entity.html">
                    api.entity.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.map.html">
                    api.map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.server.html">
                    api.server.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.variable.html">
                    api.variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.view.html">
                    api.view.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="app.instance.html">
                    app.instance.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appjs.html">
                    appjs.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="data.html">
                    data.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="dataUtil.html">
                    dataUtil.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="manager.html">
                    manager.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="messages.html">
                    messages.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditData.html">
                    auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEvent.html">
                    auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="base.html">
                    base.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityDefinition.html">
                    entityDefinition.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityObject.html">
                    entityObject.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventAction.html">
                    eventAction.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventRule.html">
                    eventRule.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="link.html">
                    link.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="map.html">
                    map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shape.html">
                    shape.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="user.html">
                    user.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="userSettings.html">
                    userSettings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variable.html">
                    variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminRoutes.html">
                    adminRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appRoutes.html">
                    appRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settings.html">
                    settings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="sockets.html">
                    sockets.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="tutorial.html">
                    tutorial.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="vectors.html">
                    vectors.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="statusTabView.html">
                    statusTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="toolsTabView.html">
                    toolsTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="usersTabView.html">
                    usersTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminView.html">
                    adminView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="alertView.html">
                    alertView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditDataManagerView.html">
                    auditDataManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEventManagerView.html">
                    auditEventManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="baseView.html">
                    baseView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="createMapView.html">
                    createMapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityManagerView.html">
                    entityManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="footerView.html">
                    footerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="helpView.html">
                    helpView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entitiesTabView.html">
                    entitiesTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="inspectorTabView.html">
                    inspectorTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapTabView.html">
                    mapTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeTabView.html">
                    shapeTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="controlsView.html">
                    controlsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="labelEditView.html">
                    labelEditView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkCreatorView.html">
                    linkCreatorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkLabelsView.html">
                    linkLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkView.html">
                    linkView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeLabelsView.html">
                    shapeLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeView.html">
                    shapeView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapesMoverView.html">
                    shapesMoverView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapView.html">
                    mapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="menuView.html">
                    menuView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="overlayView.html">
                    overlayView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="scriptEditorView.html">
                    scriptEditorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settingsView.html">
                    settingsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="startView.html">
                    startView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variableManagerView.html">
                    variableManagerView.coffee
                  </a>
                </li>
              
            </ol>
          </div>
        
      </div>

      
        
        <h2 id="map-controls-entity-list-view">MAP CONTROLS: ENTITY LIST VIEW</h2>

        
      
        
        <p>The overlay view containing the list of shapes available to be added to the
map. The overlay is shown only when the map is in edit mode.</p>

        
          <div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">SystemApp</span>.<span class="title">MapControlsEntitiesTabView</span> <span class="keyword">extends</span> <span class="title">SystemApp</span>.<span class="title">BaseView</span></span>

    <span class="attribute">$list</span>: <span class="literal">null</span>             <span class="comment"># the "Ul" element containing the entity items</span>
    <span class="attribute">$txtSearch</span>: <span class="literal">null</span>        <span class="comment"># the "Search" input field</span>
    <span class="attribute">$shapeDragger</span>: <span class="literal">null</span>     <span class="comment"># represents a copy of the current shape being dragged to the map</span>

    <span class="attribute">timerSearch</span>: <span class="literal">null</span>       <span class="comment"># holds the timer to trigger the `search` method</span></pre></div>
        
      
        
        <h2 id="init-and-dispose">INIT AND DISPOSE</h2>

        
      
        
        <p>Inits the view. Parent will be the <a href="controlsView.html">Map Controls View</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">initialize</span>: <span class="function"><span class="params">(parent)</span> =&gt;</span>
        <span class="property">@baseInit</span> parent

        <span class="property">@mapView</span> = parent.parentView

        <span class="property">@setDom</span>()
        <span class="property">@setEvents</span>()
        <span class="property">@addCustomShapeToList</span>()
        <span class="property">@searchBlur</span>()</pre></div>
        
      
        
        <p>Dispose the view.</p>

        
          <div class='highlight'><pre>    <span class="attribute">dispose</span>:<span class="function"> =&gt;</span>
        <span class="property">@timerSearch</span> = <span class="literal">null</span>
        <span class="property">@baseDispose</span>()</pre></div>
        
      
        
        <p>Set the DOM elements cache.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setDom</span>:<span class="function"> =&gt;</span>
        <span class="property">@setElement</span> $ <span class="string">"#map-ctl-tab-entities"</span>
        <span class="property">@$list</span> = <span class="property">@$el</span>.children <span class="string">"ul"</span>
        <span class="property">@$txtSearch</span> = $ <span class="string">"#map-entity-list-search"</span></pre></div>
        
      
        
        <p>Bind events to DOM and other controls.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setEvents</span>:<span class="function"> =&gt;</span>
        $(<span class="built_in">window</span>).resize <span class="property">@resize</span>

        <span class="property">@$txtSearch</span>.focus <span class="property">@searchFocus</span>
        <span class="property">@$txtSearch</span>.blur <span class="property">@searchBlur</span>
        <span class="property">@$txtSearch</span>.keyup <span class="property">@prepareSearch</span></pre></div>
        
      
        
        <p>When map is loaded on the <a href="mapView.html">map view</a>, bind it here.</p>

        
          <div class='highlight'><pre>        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"loaded"</span>, <span class="property">@bindMap</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"edit:toggle"</span>, <span class="property">@setEnabled</span></pre></div>
        
      
        
        <p>Keep <a href="entityDefinition.html">entities</a> in sync.</p>

        
          <div class='highlight'><pre>        <span class="property">@listenTo</span> SystemApp.Data.entities, <span class="string">"add"</span>, <span class="property">@entityAdded</span>
        <span class="property">@listenTo</span> SystemApp.Data.entities, <span class="string">"remove"</span>, <span class="property">@entityRemoved</span></pre></div>
        
      
        
        <p>Enable or disable adding shapes to the current <a href="map.html">Map</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setEnabled</span>: <span class="function"><span class="params">(value)</span> =&gt;</span>
        formElements = [<span class="property">@$list</span>]

        <span class="keyword">if</span> <span class="keyword">not</span> value
            elm.attr <span class="string">"disabled"</span>, <span class="string">"disabled"</span> <span class="keyword">for</span> elm <span class="keyword">in</span> formElements
            <span class="property">@$list</span>.addClass <span class="string">"disabled"</span>
        <span class="keyword">else</span>
            elm.removeAttr <span class="string">"disabled"</span> <span class="keyword">for</span> elm <span class="keyword">in</span> formElements
            <span class="property">@$list</span>.removeClass <span class="string">"disabled"</span></pre></div>
        
      
        
        <p>Toggles the visibility on or off, using a fade effect.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toggleVisibility</span>: <span class="function"><span class="params">(visible)</span> =&gt;</span>
        <span class="keyword">if</span> visible
            <span class="property">@$el</span>.fadeIn SystemApp.Settings.map.opacityInterval
        <span class="keyword">else</span>
            <span class="property">@$el</span>.fadeOut SystemApp.Settings.map.opacityInterval</pre></div>
        
      
        
        <p>When window has loaded or resized, set the height to the parent&#39;s height.</p>

        
          <div class='highlight'><pre>    <span class="attribute">resize</span>:<span class="function"> =&gt;</span>
        <span class="property">@$list</span>.css <span class="string">"height"</span>, <span class="property">@$el</span>.parent().innerHeight() - <span class="number">74</span></pre></div>
        
      
        
        <h2 id="entity-sync">ENTITY SYNC</h2>

        
      
        
        <p>When a new <a href="entityDefinition.html">Entity Definition</a> is added on the
global <a href="data.html">data</a>, parse it and add its <a href="entityObject.html">objects</a>
to the <code>$list</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">entityAdded</span>: <span class="function"><span class="params">(entityDef)</span> =&gt;</span>
        <span class="property">@listenTo</span> entityDef, <span class="string">"change:data"</span>, <span class="property">@entityDataChanged</span>
        <span class="property">@listenTo</span> entityDef.data(), <span class="string">"add"</span>, <span class="property">@entityDataAdded</span>
        <span class="property">@listenTo</span> entityDef.data(), <span class="string">"remove"</span>, <span class="property">@entityDataRemoved</span>

        <span class="property">@entityDataAdded</span> obj <span class="keyword">for</span> obj <span class="keyword">in</span> entityDef.data().models

        SystemApp.consoleLog <span class="string">"MapControlsEntitiesTabView.entityAdded"</span>, entityDef</pre></div>
        
      
        
        <p>When an <a href="entityDefinition.html">Entity Definition</a> is removed from the global
<a href="data.html">data</a>, also remove its related <a href="entityObject.html">objects</a> from
the <code>$list</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">entityRemoved</span>: <span class="function"><span class="params">(entityDef)</span> =&gt;</span>
        <span class="property">@stopListening</span> entityDef.data()
        className = entityDef.friendlyId().toLowerCase()
        $(<span class="string">".<span class="subst">#{className}</span>"</span>).remove()</pre></div>
        
      
        
        <p>If user is dragging / adding a shape which was removed, alert and cancel the dragging.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> <span class="property">@$shapeDragger</span>?
            entity = <span class="property">@$shapeDragger</span>.data <span class="string">"entity"</span>
            <span class="keyword">if</span> entity.entityDefinitionId() <span class="keyword">is</span> entityDef.friendlyId()
                <span class="property">@dragCancel</span>()

        SystemApp.consoleLog <span class="string">"MapControlsEntitiesTabView.entityRemoved"</span>, entityDef.friendlyId()</pre></div>
        
      
        
        <p>When the entity&#39;s <a href="entityObject.html">data collection</a> gets changed.
This will effectively remove and re-add all entity objects to the list.
Do not proceed if a shape is being dragged at the moment.</p>

        
          <div class='highlight'><pre>    <span class="attribute">entityDataChanged</span>: <span class="function"><span class="params">(entityDef)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="property">@$shapeDragger</span>?
            SystemApp.consoleLog <span class="string">"MapControlsEntitiesTabView.entityDataChanged"</span>, <span class="string">"Canceled because a shape is being dragged!"</span>, entityDef.friendlyId()
            <span class="keyword">return</span>

        className = entityDef.friendlyId().toLowerCase()
        $(<span class="string">".<span class="subst">#{className}</span>"</span>).remove()
        <span class="property">@addToList</span> obj <span class="keyword">for</span> obj <span class="keyword">in</span> entityDef.data().models

        SystemApp.consoleLog <span class="string">"MapControlsEntitiesTabView.entityDataChanged"</span>, entityDef.friendlyId()</pre></div>
        
      
        
        <p>When the entity&#39;s <a href="entityObject.html">data</a> gets new entity objects, add them
to the <code>$list</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">entityDataAdded</span>: <span class="function"><span class="params">(entityObject)</span> =&gt;</span>
        <span class="property">@addToList</span> entityObject</pre></div>
        
      
        
        <p>When the entity&#39;s <a href="entityObject.html">data</a> has entity objects deleted, remove them
from the <code>$list</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">entityDataRemoved</span>: <span class="function"><span class="params">(entityObject)</span> =&gt;</span>
        li = $ SystemApp.Settings.map.entityListPrefix + entityObject.entityDefinitionId() + <span class="string">"-"</span> + entityObject.id
        li.remove()</pre></div>
        
      
        
        <h2 id="binding-and-options">BINDING AND OPTIONS</h2>

        
      
        
        <p>Removes all entity objects from the <code>$list</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">clear</span>:<span class="function"> =&gt;</span>
        <span class="property">@$list</span>.empty()</pre></div>
        
      
        
        <p>Bind map to control. Listen to the <code>add</code> and <code>remove</code> events on the
current map&#39;s shapes collection, and set the entity count.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindMap</span>: <span class="function"><span class="params">(map)</span> =&gt;</span>
        <span class="property">@model</span> = map
        <span class="property">@resize</span>()
        <span class="property">@resetListCount</span>()

        <span class="property">@model</span>.shapes().<span class="literal">off</span> <span class="string">"add"</span>, <span class="property">@increaseListCount</span>
        <span class="property">@model</span>.shapes().<span class="literal">off</span> <span class="string">"remove"</span>, <span class="property">@subtractListCount</span>
        <span class="property">@model</span>.shapes().<span class="literal">on</span> <span class="string">"add"</span>, <span class="property">@increaseListCount</span>
        <span class="property">@model</span>.shapes().<span class="literal">on</span> <span class="string">"remove"</span>, <span class="property">@subtractListCount</span></pre></div>
        
      
        
        <p>Add the &quot;custom shape&quot; to the top of the entity list. This shape
is NOT bound to any entity, thus its values are totally customizable.</p>

        
          <div class='highlight'><pre>    <span class="attribute">addCustomShapeToList</span>:<span class="function"> =&gt;</span>
        li = $(document.createElement <span class="string">"li"</span>)
        li.attr <span class="string">"id"</span>, SystemApp.Settings.map.entityListPrefix + <span class="string">"0"</span>
        li.html SystemApp.Settings.shape.customText
        li.addClass <span class="string">"custom"</span></pre></div>
        
      
        
        <p>Add an empty span which represents the entity&#39;s count.</p>

        
          <div class='highlight'><pre>        spanCount = $(document.createElement <span class="string">"span"</span>)
        spanCount.addClass <span class="string">"count"</span>

        li.append spanCount

        <span class="property">@addListItem</span> li</pre></div>
        
      
        
        <p>Bind a single entity to the <code>$list</code> element.</p>

        
          <div class='highlight'><pre>    <span class="attribute">addToList</span>: <span class="function"><span class="params">(obj)</span> =&gt;</span>
        obj = obj.model <span class="keyword">if</span> obj.model?
        definitionId = obj.entityDefinitionId()
        definitionId = SystemApp.Settings.shape.customId <span class="keyword">if</span> <span class="keyword">not</span> definitionId?

        li = $(document.createElement <span class="string">"li"</span>)
        li.attr <span class="string">"id"</span>, SystemApp.Settings.map.entityListPrefix + definitionId + <span class="string">"-"</span> + obj.id
        li.attr <span class="string">"title"</span>, obj.title()
        li.html obj.title()
        li.data <span class="string">"entity"</span>, obj
        li.addClass definitionId.toLowerCase()</pre></div>
        
      
        
        <p>Add a small text showing the type of entity (set by the <code>entityDefinitionId</code>).</p>

        
          <div class='highlight'><pre>        defSpan = $(document.createElement <span class="string">"span"</span>)
        defSpan.html definitionId
        defSpan.addClass <span class="string">"type"</span></pre></div>
        
      
        
        <p>Add an empty span which represents the entity&#39;s count.</p>

        
          <div class='highlight'><pre>        spanCount = $(document.createElement <span class="string">"span"</span>)
        spanCount.addClass <span class="string">"count"</span>

        li.append spanCount
        li.append defSpan

        <span class="property">@addListItem</span> li</pre></div>
        
      
        
        <p>Add a list item to the <code>$list</code> entitiies list, and fade it into view.</p>

        
          <div class='highlight'><pre>    <span class="attribute">addListItem</span>: <span class="function"><span class="params">(li)</span> =&gt;</span>
        li.css <span class="string">"display"</span>, <span class="string">"none"</span>
        li.mousedown <span class="property">@dragStart</span>
        <span class="property">@$list</span>.append li
        li.fadeIn SystemApp.Settings.map.opacityInterval</pre></div>
        
      
        
        <p>Helper method to get the entity counter element based on a map shape.
Return the default &quot;Custom Shape&quot; list item in case no items are found for the
specified <a href="shape.html">Shape</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">getSpanCountElement</span>: <span class="function"><span class="params">(shape)</span> =&gt;</span>
        entityDefId = shape.entityDefinitionId()
        entityObjId = shape.entityObjectId()

        li = $ <span class="string">"#"</span> + SystemApp.Settings.map.entityListPrefix + entityDefId + <span class="string">"-"</span> + entityObjId
        li = $ <span class="string">"#"</span> + SystemApp.Settings.map.entityListPrefix + <span class="string">"0"</span> <span class="keyword">if</span> li.length &lt; <span class="number">1</span>

        <span class="keyword">return</span> li.find <span class="string">"span.count"</span></pre></div>
        
      
        
        <p>Reset the shape&#39;s count. This will clear all the <code>span</code> elements inside each list
item, and reset their values to the correct count based on the current map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">resetListCount</span>:<span class="function"> =&gt;</span>
        <span class="property">@$list</span>.find(<span class="string">"li &gt; span.count"</span>).html <span class="string">""</span>
        _.each <span class="property">@model</span>.shapes<span class="function"><span class="params">()</span>.<span class="title">models</span>, <span class="params">(shape)</span> =&gt;</span> <span class="property">@updateListCount</span> shape</pre></div>
        
      
        
        <p>When shape is added to the map, check its entity type and update
its &quot;count&quot; to the current value + 1 on the <code>$list</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">updateListCount</span>: <span class="function"><span class="params">(shape, subtract)</span> =&gt;</span>
        spanCount = <span class="property">@getSpanCountElement</span> shape</pre></div>
        
      
        
        <p>Check the current count, or consider 0 if the span is empty.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> spanCount.text().length &gt; <span class="number">0</span>
            count = parseInt spanCount.text()
        <span class="keyword">else</span>
            count = <span class="number">0</span></pre></div>
        
      
        
        <p>Subtract - 1 if the <code>subtract</code> parameter is true, otherwise add + 1.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> subtract? <span class="keyword">and</span> subtract
            count--
        <span class="keyword">else</span>
            count++</pre></div>
        
      
        
        <p>Update the span value.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> count &gt; <span class="number">0</span>
            spanCount.html count
        <span class="keyword">else</span>
            spanCount.html <span class="string">""</span></pre></div>
        
      
        
        <p>When shape is added to the map, check its entity definition ID and update
its &quot;count&quot; to the current value + 1 on the <code>$list</code>. If no item is found,
consider it being a Custom Shape.</p>

        
          <div class='highlight'><pre>    <span class="attribute">increaseListCount</span>: <span class="function"><span class="params">(shape)</span> =&gt;</span>
        <span class="property">@updateListCount</span> shape</pre></div>
        
      
        
        <p>When shape is removed from the map, check its entity definition ID and update
its &quot;count&quot; to the current value - 1 on the <code>$list</code>. If no item is found,
consider it being a Custom Shape.</p>

        
          <div class='highlight'><pre>    <span class="attribute">subtractListCount</span>: <span class="function"><span class="params">(shape)</span> =&gt;</span>
        <span class="property">@updateListCount</span> shape, <span class="literal">true</span></pre></div>
        
      
        
        <p>Add a shape to the current map. If <code>x</code> and <code>y</code> are passed,
shape will be added on that specific position on the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">addShapeToMap</span>: <span class="function"><span class="params">(entityObj, x, y)</span> =&gt;</span>
        viewBox = <span class="property">@mapView</span>.getViewBox()

        shapeOptions = {}

        x = (x * <span class="property">@mapView</span>.currentZoom + viewBox.x) / (<span class="property">@mapView</span>.model.gridSizeX())
        x = Math.round x

        y = (y * <span class="property">@mapView</span>.currentZoom + viewBox.y) / (<span class="property">@mapView</span>.model.gridSizeY())
        y = Math.round y

        <span class="keyword">if</span> entityObj?
            entityDefinition = entityObj.collection.parentModel</pre></div>
        
      
        
        <p>Build the title property text, which should look similar to &quot;#obj.name&quot;.</p>

        
          <div class='highlight'><pre>            title = entityDefinition.objectTitleAttribute()
            sep = title.indexOf <span class="string">","</span>
            title = title.substring(<span class="number">0</span>, sep) <span class="keyword">if</span> title.indexOf(<span class="string">","</span>) &gt; <span class="number">0</span>
            title = SystemApp.Settings.general.dataBindingKey + SystemApp.Settings.entityObject.bindingNamespace + <span class="string">"."</span> + title</pre></div>
        
      
        
        <p>Set shape options based on the <a href="entityDefinition">entity definition</a> template.</p>

        
          <div class='highlight'><pre>            shapeOptions.textTitle = title
            shapeOptions.entityObjectId = entityObj.id
            shapeOptions.entityDefinitionId = entityObj.entityDefinitionId()
            shapeOptions.background = entityDefinition.shapeBackground()
            shapeOptions.fontSize = entityDefinition.shapeFontSize()
            shapeOptions.foreground = entityDefinition.shapeForeground()
            shapeOptions.icon = entityDefinition.shapeIcon()
            shapeOptions.opacity = entityDefinition.shapeOpacity()
            shapeOptions.roundedCorners = entityDefinition.shapeRoundedCorners()
            shapeOptions.sizeX = entityDefinition.shapeSizeX()
            shapeOptions.sizeY = entityDefinition.shapeSizeY()
            shapeOptions.stroke = entityDefinition.shapeStroke()
            shapeOptions.strokeWidth = parseInt entityDefinition.shapeStrokeWidth()
            shapeOptions.titleForeground = entityDefinition.shapeTitleForeground()
            shapeOptions.zIndex = entityDefinition.shapeZIndex()

        shapeOptions.x = x
        shapeOptions.y = y

        <span class="property">@model</span>.shapes().create shapeOptions</pre></div>
        
      
        
        <h2 id="dragging-shapes">DRAGGING SHAPES</h2>

        
      
        
        <p>When user starts dragging a shape from the <code>$list</code>, clone it to the <code>$shapeDragger</code> variable.</p>

        
          <div class='highlight'><pre>    <span class="attribute">dragStart</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@mapView</span>.editEnabled <span class="keyword">or</span> <span class="keyword">not</span> <span class="property">@mapView</span>.model?
            <span class="keyword">return</span></pre></div>
        
      
        
        <p>Get the list element and default shape settings.</p>

        
          <div class='highlight'><pre>        li = $ e.target
        entity = li.data <span class="string">"entity"</span>
        background = SystemApp.Settings.shape.background
        foreground = SystemApp.Settings.shape.foreground
        sizeX = SystemApp.Settings.shape.gridViewSizeX
        sizeY = SystemApp.Settings.shape.gridViewSizeY

        <span class="property">@$shapeDragger</span> = li.clone <span class="literal">false</span>
        <span class="property">@$shapeDragger</span>.addClass <span class="string">"shape-dragger"</span>

        <span class="keyword">if</span> entity?
            entityDef = entity.collection.parentModel
            background = entityDef.get <span class="string">"shapeBackground"</span>
            foreground = entityDef.get <span class="string">"shapeForeground"</span>
            sizeX = entityDef.get <span class="string">"shapeSizeX"</span>
            sizeY = entityDef.get <span class="string">"shapeSizeY"</span>
            <span class="property">@$shapeDragger</span>.data <span class="string">"entity"</span>, entity</pre></div>
        
      
        
        <p>Append CSS to the dragger.</p>

        
          <div class='highlight'><pre>        <span class="property">@$shapeDragger</span>.css <span class="string">"background-color"</span>, background
        <span class="property">@$shapeDragger</span>.css <span class="string">"color"</span>, foreground
        <span class="property">@$shapeDragger</span>.css <span class="string">"width"</span>, sizeX * <span class="property">@mapView</span>.model.gridSizeX() * (<span class="number">1</span> / <span class="property">@mapView</span>.currentZoom) - <span class="number">30</span>
        <span class="property">@$shapeDragger</span>.css <span class="string">"height"</span>, sizeY * <span class="property">@mapView</span>.model.gridSizeY() * (<span class="number">1</span> / <span class="property">@mapView</span>.currentZoom) - <span class="number">10</span>

        li.parent().append <span class="property">@$shapeDragger</span>

        <span class="property">@dragMove</span> e

        $(<span class="built_in">window</span>).mousemove <span class="property">@dragMove</span>
        $(<span class="built_in">window</span>).mouseup <span class="property">@dragStop</span></pre></div>
        
      
        
        <p>When user is moving the mouse while dragging a shape, set its absolute position.</p>

        
          <div class='highlight'><pre>    <span class="attribute">dragMove</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="property">@$shapeDragger</span>.css <span class="string">"left"</span>, e.pageX - <span class="number">1</span>
        <span class="property">@$shapeDragger</span>.css <span class="string">"top"</span>, e.pageY - <span class="number">1</span>

        e.preventDefault()
        e.stopPropagation()</pre></div>
        
      
        
        <p>When user releases the mouse button, check if the <code>$shapeDragger</code> was dragged
a SVG element (which means, to the map). If so, call the <code>addShapeToMap</code>.
Finally destroy the <code>$shapeDragger</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">dragStop</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        $(<span class="built_in">window</span>).unbind <span class="string">"mousemove"</span>, <span class="property">@dragMove</span>
        $(<span class="built_in">window</span>).unbind <span class="string">"mouseup"</span>, <span class="property">@dragStop</span>

        entity = <span class="property">@$shapeDragger</span>.data <span class="string">"entity"</span>
        <span class="property">@$shapeDragger</span>?.remove()
        <span class="property">@$shapeDragger</span> = <span class="literal">null</span>

        <span class="keyword">if</span> e <span class="keyword">isnt</span> <span class="literal">false</span>
            target = document.elementFromPoint e.pageX, e.pageY
            tag = target?.tagName

            <span class="keyword">if</span> tag <span class="keyword">is</span> <span class="string">"svg"</span> <span class="keyword">or</span> tag <span class="keyword">is</span> <span class="string">"rect"</span> <span class="keyword">or</span> tag <span class="keyword">is</span> <span class="string">"circle"</span> <span class="keyword">or</span> tag <span class="keyword">is</span> <span class="string">"path"</span>
                <span class="property">@addShapeToMap</span> entity, e.pageX, e.pageY - <span class="number">45</span>

        e.preventDefault()
        e.stopPropagation()</pre></div>
        
      
        
        <p>Cancel the dragging action. This will be mainyl called when a particular
<a href="entityObject.html">entity object</a> being dragged is removed from the server,
this making it an invalid shape.</p>

        
          <div class='highlight'><pre>    <span class="attribute">dragCancel</span>:<span class="function"> =&gt;</span>
        <span class="property">@dragStop</span> <span class="literal">false</span></pre></div>
        
      
        
        <h2 id="search-and-filter">SEARCH AND FILTER</h2>

        
      
        
        <p>When the search input field gets focus, remove its watermark (if there&#39;s one).</p>

        
          <div class='highlight'><pre>    <span class="attribute">searchFocus</span>:<span class="function"> =&gt;</span>
        value = <span class="property">@$txtSearch</span>.val()

        <span class="keyword">if</span> value <span class="keyword">is</span> SystemApp.Messages.searchWatermark
            <span class="property">@$txtSearch</span>.removeClass <span class="string">"watermark"</span>
            <span class="property">@$txtSearch</span>.val <span class="string">""</span></pre></div>
        
      
        
        <p>When the search input field lots focus, add a watermark in case its text value is empty.</p>

        
          <div class='highlight'><pre>    <span class="attribute">searchBlur</span>:<span class="function"> =&gt;</span>
        value = <span class="property">@$txtSearch</span>.val()

        <span class="keyword">if</span> value.replace(<span class="string">" "</span>, <span class="string">""</span>) <span class="keyword">is</span> <span class="string">""</span>
            <span class="property">@$txtSearch</span>.addClass <span class="string">"watermark"</span>
            <span class="property">@$txtSearch</span>.val SystemApp.Messages.searchWatermark</pre></div>
        
      
        
        <p>Reset the <code>timerSearch</code>, which will be triggered in X miliseconds
defined on the <a href="settings.html">Settings</a>. Pressing the Esc key
will clear the search text field.</p>

        
          <div class='highlight'><pre>    <span class="attribute">prepareSearch</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="keyword">if</span> e.keyCode <span class="keyword">is</span> <span class="number">27</span>
            <span class="property">@$txtSearch</span>.val <span class="string">""</span>

        window.clearTimeout <span class="property">@timerSearch</span> <span class="keyword">if</span> <span class="property">@timerSearch</span> <span class="keyword">isnt</span> <span class="literal">null</span>
        <span class="property">@timerSearch</span> = window.setTimeout <span class="property">@search</span>, SystemApp.Settings.general.searchDelay</pre></div>
        
      
        
        <p>Filter the elements being shown on the entity list based on the <code>$txtSearch</code> value.
The &quot;Custom shape...&quot; is always shown on the results.</p>

        
          <div class='highlight'><pre>    <span class="attribute">search</span>:<span class="function"> =&gt;</span>
        <span class="property">@timerSearch</span> = <span class="literal">null</span>
        value = <span class="property">@$txtSearch</span>.val()
        items = <span class="property">@$list</span>.children <span class="string">"li"</span></pre></div>
        
      
        
        <p>If value is empty, show everything.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> $.trim(value) <span class="keyword">is</span> <span class="string">""</span>
            items.css <span class="string">"display"</span>, <span class="string">"block"</span>
            <span class="keyword">return</span>

        prop = <span class="string">""</span>
        quantity = <span class="literal">null</span>
        value = value.replace <span class="string">"=="</span>, <span class="string">"="</span></pre></div>
        
      
        
        <p>Search for a valid eval separator.</p>

        
          <div class='highlight'><pre>        i = value.indexOf <span class="string">"="</span>
        i = value.indexOf <span class="string">"&lt;"</span> <span class="keyword">if</span> i &lt; <span class="number">0</span>
        i = value.indexOf <span class="string">"&gt;"</span> <span class="keyword">if</span> i &lt; <span class="number">0</span></pre></div>
        
      
        
        <p>If the separator is the first character, then search based on the quantity.
For example =2 will show all entities which are added twice to the map,
and &gt;4 will show all entities which are added more than 4 times to the map.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> i <span class="keyword">is</span> <span class="number">0</span>
            separator = value.substring <span class="number">0</span>, <span class="number">1</span>
            quantity = value.substring <span class="number">1</span>
            quantity = <span class="string">""</span> <span class="keyword">if</span> quantity <span class="keyword">is</span> <span class="string">"0"</span>
        <span class="keyword">else</span> <span class="keyword">if</span> i &gt; <span class="number">0</span>
            separator = value.substring i, i + <span class="number">1</span>
            prop = value.substring <span class="number">0</span>, i
            value = value.substring i + <span class="number">1</span>

        _.each items, <span class="function"><span class="params">(li)</span> =&gt;</span>
            li = $ li
            display = <span class="string">"block"</span>
            entity = li.data <span class="string">"entity"</span>
            spanQuantity = li.children(<span class="string">"span.count"</span>).html()

            <span class="keyword">if</span> entity?
                text = entity.title()</pre></div>
        
      
        
        <p>If the <code>prop</code> variable is empty, do a normal value comparison against the
text, otherwise it means it&#39;s an evaluation so do a dirty <code>eval()</code>
against the object&#39;s property. For example the value &quot;db&quot; will return all
entities which have &quot;db&quot; on its name, while value &quot;internal_ip&gt;10.1.1.1&quot;
will return entities which have the property &quot;internal_id&quot; higher than
&quot;10.1.1.1&quot;.</p>

        
          <div class='highlight'><pre>                <span class="keyword">if</span> quantity?
                    <span class="keyword">if</span> separator <span class="keyword">is</span> <span class="string">"="</span> <span class="keyword">and</span> spanQuantity <span class="keyword">isnt</span> quantity
                        display = <span class="string">"none"</span>
                    <span class="keyword">else</span> <span class="keyword">if</span> separator <span class="keyword">is</span> <span class="string">"&gt;"</span> <span class="keyword">and</span> spanQuantity &lt;= quantity
                        display = <span class="string">"none"</span>
                    <span class="keyword">else</span> <span class="keyword">if</span> separator <span class="keyword">is</span> <span class="string">"&lt;"</span> <span class="keyword">and</span> spanQuantity &gt;= quantity
                        display = <span class="string">"none"</span>
                <span class="keyword">else</span>
                    <span class="keyword">try</span>
                        <span class="keyword">if</span> prop <span class="keyword">is</span> <span class="string">""</span> <span class="keyword">and</span> text?.search(<span class="keyword">new</span> RegExp(value, <span class="string">"i"</span>)) &lt; <span class="number">0</span>
                            display = <span class="string">"none"</span>
                        <span class="keyword">else</span> <span class="keyword">if</span> prop <span class="keyword">isnt</span> <span class="string">""</span> <span class="keyword">and</span> <span class="keyword">not</span> eval(<span class="string">"entity.get('<span class="subst">#{prop}</span>')<span class="subst">#{separator}</span>'<span class="subst">#{value}</span>'"</span>)
                            display = <span class="string">"none"</span>
                    <span class="keyword">catch</span> ex
                        <span class="keyword">if</span> text?.indexOf(value) &lt; <span class="number">0</span>
                            display = <span class="string">"none"</span>


            li.css <span class="string">"display"</span>, display</pre></div>
        
      
      <div class="fleur">h</div>
    </div>
  </div>
</body>
</html>
